<template>
    <div class="newsinfoContainer">
        <!-- 标题 -->
        <section class="title">
            <h2>{{this.news.title}}</h2>
        </section>
        <!-- 编辑日期，点击率 -->
        <section class="des">
        <p>
            <span class="author">作者：{{news.author}}</span>
            <span class="add-time">日期：{{news.add_time | dateFormat}}</span>
            <span class="click_count">阅读：{{news.click_count}}</span>
        </p>
        </section>
        <!-- 图片 -->
        <section class="img">
            <img :src="this.news.img_url" alt="">
        </section>
        <!-- 正文 -->
        <section class="content">
            <div v-html="this.news.content"></div>
        </section>
        <section class="comment">
            <comment :id="this.newsid"></comment>
        </section>
    </div>
</template>

<script>
//导入评论组件
//把comment挂载到newsinfo上
//通过标签的形式，插入到newsinfo的template上
import comment from '../subComponents/comment'
export default {
    data(){
        return{
            newsid:this.$route.params.id, //获取参数
            news:{}
        };
    },
    created(){
        // console.log(1111);
        this.loadNewsInfo();
    },
    methods:{
        loadNewsInfo(){
            console.log(this.newsid);
            this.$http.get('news/newsinfo',{
                params:{
                    newsid:this.newsid
                }    
            }).then(res =>{
                console.log(res.data);
                var data = res.data;
                if(data.Status == 0){
                    this.news = data.Data[0]
                }
            })
        },
    },
    components:{
        comment,
    }
}
</script>

<style lang="less">
    .newsinfoContainer{
        padding: 15px;
        padding-bottom: 40px;
        .title{
            padding: 5px 0;
            font-size: 24px;
            color:#333;
        }
        .des{
            font-size: 12px;
            color: #aaa;
            padding-bottom: 20px;
            p{
                display: flex;
                justify-content: space-between;
            }
        }
        .img{
            img{
                width: 100%;

            }
            padding-bottom: 10px;
        }
        .content{
            font-size: 14px;
            color:#444;
            p{
                text-indent: 20px;
            }
            img{
                width:100%;
            }
        }
    }
</style>